<template>
<section id="testdrive" class="page">
    <div class="vhBox flexBox">
        <div class="t-bg">
            <input type="text" placeholder="姓名" v-model.trim="formData.name" @blur="screenFix">
            <input type="tel" maxlength="11" placeholder="电话" id="phone" v-model.trim="formData.phone" @blur="screenFix">
            <select id="province" v-model="dealerData.p" @blur="screenFix">
                <option v-for="(n,i) in dealerData.all" :value="i" v-html="n.name"></option>
            </select>
            <select id="city" v-model="dealerData.c" @blur="screenFix">
                <option v-for="(n,i) in dealerData.cArr" :value="i" v-html="n.name"></option>
            </select>
            <select id="dealer" v-model="dealerData.d" @blur="screenFix">
                <option v-for="(n,i) in dealerData.dArr" :value="i" v-html="n.name"></option>
            </select>
            <i id="agree" :class="{checked: agree}" @click="toggleAgree"></i>
            <i id="submit" @click="submitForm"></i>
        </div>
        <Logo />
    </div>
    <Tip v-show="tip" :msg="msg" @close="closeTip" />
</section>
</template>

<script>
import Tip from '@/components/Tip.vue'
import dealer from '@/utils/dealer'
import Logo from '@/components/Logo.vue'
export default {
	name: 'Testdrive',
	data() {
		return {
            tip: false,
            msg: '',
            agree: true,
            dealerData: {
                all: [],
                cArr: [],
                dArr: [],
                p: 0,
                c: 0,
                d: 0,
            },
            formData: {
                openid: this.$store.state.openid,
                name: '',
                phone: '',
                source: this.$store.state.source,
                province: '请选择省份',
                city: '请选择城市',
                dealer: '请选择经销商',
            }
		}
	},
	components: {
        Tip,
        Logo,
	},
    watch: {
        'dealerData.p'(t){
            this.dealerData.c = 0;
            this.dealerData.d = 0;
            this.dealerData.cArr = this.dealerData.all[t].childs;
            this.dealerData.dArr = this.dealerData.all[t].childs[this.dealerData.c].childs;
            this.formData.province = this.dealerData.all[t].value;
            this.formData.city = this.dealerData.cArr[this.dealerData.c].value;
            this.formData.dealer = this.dealerData.dArr[this.dealerData.d].value;
        },
        'dealerData.c'(t){
            this.dealerData.dArr = this.dealerData.all[this.dealerData.p].childs[t].childs;
            this.formData.city = this.dealerData.cArr[t].value;
            this.formData.dealer = this.dealerData.dArr[this.dealerData.d].value;
        }
    },
	methods: {
        screenFix(){
            window.scrollTo(0,0);
        },
        initDealer(){
            this.dealerData.all = dealer.arr;
            this.dealerData.cArr = this.dealerData.all[this.dealerData.p].childs;
            this.dealerData.dArr = this.dealerData.all[this.dealerData.p].childs[this.dealerData.c].childs;
        },
        toggleAgree(){
            this.agree = !this.agree;
        },
		checkForm(){
            let data = this.formData,
                phonez = /^1(3|4|5|7|8)\d{9}$/;
            if(data.name == ''){
                this.showTip('请您填写您的姓名');
                return false
            }
            if(!phonez.test(data.phone)){
                this.showTip('请您填写您的电话');
                return false
            }
            if(data.province == '请选择省份'){
                this.showTip('请选择省份');
                return false
            }
            if(data.city == '请选择城市'){
                this.showTip('请选择城市');
                return false
            }
            if(data.dealer == '请选择经销商'){
                this.showTip('请选择经销商');
            }
            if(!this.agree){
                this.showTip('请您接受保护条款');
                return false
            }
            return true;
        },
        showTip(msg){
            this.msg = msg;
            this.tip = true;
        },
        closeTip(){
            this.tip = false;
            if(this.msg == '恭喜，提交成功!'){
                this.testDriveOver();
            }
        },
        submitForm(){
            if(this.checkForm()){
                this.$post('/vgic_BeetleFE/adddrive.php', this.formData, (res)=>{
                    if(res.errcode == 1){
                        this.showTip('恭喜，提交成功!');
                    }else{
                        this.showTip(res.msg);
                    }
                })
            }
        },
        testDriveOver(){
            this.$store.commit('setIsTestdrive', true);
            this.$store.commit('setPage', 'draw');
        },
	},
	mounted() {
        this.initDealer();
	}
}
</script>

<style lang="scss" scoped>
#testdrive {
    background: url(../assets/l-bg.jpg) center no-repeat;
    .t-bg {
        position: relative;
        margin: 0 auto;
        width: 498px;
        height: 859px;
        background: url(../assets/t-bg.png);

        input,
        select {
            position: absolute;
            left: 10px;
            top: 110px;
            padding-left: 20px;
            width: 390px;
            height: 80px;
            font-size: 28px;
            line-height: 80px;
            // border: 1px solid #000;
        }
        #phone {
            top: 235px;
        }
        #province {
            top: 359px;
        }
        #city {
            top: 484px;
        }
        #dealer {
            top: 608px;
        }
        #agree {
            position: absolute;
            left: -6px;
            top: 699px;
            padding: 0;
            width: 50px;
            height: 50px;

            &.checked {
                background: url(../assets/t-checkbox.png) 16px 10px no-repeat;
            }
        }
        #submit {
            position: absolute;
            left: 80px;
            top: 50%;
            margin-top: 360px;
            width: 340px;
            height: 70px;
        }
    }
}
</style>
